<template>
  <el-drawer
    v-model="visible"
    append-to-body
    :title="title || '无标题'"
    modal-class="EditInstructionDrawer"
    @close="() => emits('visibleChange', false)"
  >
    <div class="drawerContent">
      <el-form
        :model="postForm"
        class="form"
        label-width="130px"
        label-position="right"
        ref="formRef"
      >
        <div class="topFlex">
          <el-form-item label="指令所属中心：" prop="centerId" required>
            <el-select
              style="width: 200px"
              v-model="postForm.centerId"
              filterable
              placeholder="请选择所属中心"
            >
              <el-option
                v-for="item in centerSelectData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指令所属系统：" prop="sysId" required>
            <el-select
              style="width: 200px"
              v-model="postForm.sysId"
              filterable
              placeholder="请选择所属系统"
            >
              <el-option
                v-for="item in sysInfos"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="second">
          <div class="id">
            <el-form-item label="判断部署ID：">
              <el-input v-model="postForm.checkId" />
            </el-form-item>
            <el-tooltip
              content="该项默认与系统ID保持一致，若不一致请填写此项"
              placement="bottom-end"
            >
              <img class="info" src="@/assets/img/manage/info.svg" />
            </el-tooltip>
          </div>
          <el-form-item label="模块ID：" prop="moduleId">
            <el-input v-model="postForm.moduleId" :style="{ width: '320px' }">
              <template #prepend v-if="postForm.sysId === '7534040133'"
                >dsf</template
              >
            </el-input>
          </el-form-item>
        </div>
        <div class="flex_data_name">
          <el-form-item label="数据名称：" prop="instructName" required>
            <!-- 
              @input="checkInstructName"
              @blur="checkInstructName"
             -->
            <el-input
              v-model="postForm.instructName"
              :style="{ width: '350px' }"
            />
            <div
              v-if="hasSameInstructName"
              style="margin-left: 20px; color: red"
            >
              已经存在相同的指令名称
            </div>
          </el-form-item>

          <el-form-item label="功能类别">
            <el-select
              style="width: 200px"
              v-model="postForm.functionType"
              filterable
              placeholder="请选择指令功能类别"
            >
              <el-option
                v-for="item in functionTypeSelectData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="flexVersion">
          <el-form-item label="可支持角色：" prop="role" required>
            <el-checkbox-group v-model="postForm.role">
              <el-checkbox label="ADMIN">管理员</el-checkbox>
              <el-checkbox label="TEACHER">老师</el-checkbox>
              <el-checkbox label="STUDENT">学生</el-checkbox>
              <el-checkbox label="PARENT">家长</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="指令版本：" prop="version" required>
            <el-checkbox-group v-model="postForm.version">
              <el-checkbox :label="2">中小学</el-checkbox>
              <el-checkbox :label="1">大学</el-checkbox>
              <el-checkbox :label="4">中职</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <el-form-item label="支持设备：" prop="inputDevice" required>
          <el-checkbox-group v-model="postForm.inputDevice">
            <el-checkbox :label="1">PC端</el-checkbox>
            <el-checkbox :label="2">移动端</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="输入方式：" prop="inputType" required>
          <el-radio-group v-model="postForm.inputType">
            <el-radio label="1">语音指令</el-radio>
            <el-radio label="0">文本指令及语音指令</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="指令类型：" prop="instructType" required>
          <el-radio-group v-model="postForm.instructType">
            <el-radio
              v-for="item in instructTypeList"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="指令类型2：" prop="instructType02">
          <el-checkbox-group v-model="postForm.instructType02">
            <el-checkbox :label="1">售前</el-checkbox>
            <el-checkbox :label="2">售后</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <div
          class="openUrl"
          v-if="postForm.instructType !== 'CONTROL_OPERATION'"
        >
          <el-form-item
            label="打开路径："
            v-if="postForm.instructType === 'OPEN_OPERATION'"
          >
            <el-input
              v-model="postForm.openUrl"
              disabled
              :style="{ width: '400px' }"
            />
          </el-form-item>
          <!-- <el-form-item label="打开路径后缀：">
            <el-input
              v-model="postForm.suffixUrl"
              :style="{ width: '200px' }"
            />
          </el-form-item>
          <el-tooltip
            content="选填，输入打开链接地址后缀，第三方网站需输入完整的地址，如https://www.baidu.com/"
            placement="bottom-end"
          >
            <img class="info" src="@/assets/img/manage/info.svg" />
          </el-tooltip> -->
        </div>

        <div
          v-if="
            postForm.instructType !== 'CONTROL_OPERATION' &&
            postForm.instructType !== 'RECOMMEND_INSTRUCT'
          "
          class="edit-url-menu"
          :style="{
            border: '1px solid',
            'border-color': '#bcb4b4',
            'border-radius': '2px',
            'margin-bottom': '17px',
            'padding-right': '10px',
          }"
        >
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="2">中小学</el-menu-item>
            <el-menu-item index="1">大学</el-menu-item>
            <el-menu-item index="4">中职</el-menu-item>
          </el-menu>

          <!-- 2：中小学 -->
          <div class="openUrl" v-if="activeIndex === '2'">
            <div>
              <el-form-item label="打开路径后缀">
                <el-input
                  v-model="openUrlAddr.pcUrl_2"
                  :style="{ width: '90%' }"
                />
              </el-form-item>
            </div>
            <div class="mobileUrl">
              <el-form-item label="小程序路径" prop="miniProgramUrl">
                <el-input v-model="openUrlAddr.h5Url_2" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="Android路径" prop="appUrl">
                <el-input v-model="openUrlAddr.androidUrl_2" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="IOS路径" prop="appUrl">
                <el-input v-model="openUrlAddr.iosUrl_2" :style="{ width: '90%' }"/>
              </el-form-item>
            </div>
          </div>

          <!-- 1：大学 -->
          <div class="openUrl" v-if="activeIndex === '1'">
            <div>
              <el-form-item label="打开路径后缀">
                <el-input
                  v-model="openUrlAddr.pcUrl_1"
                  :style="{ width: '90%' }"
                />
              </el-form-item>
            </div>
            <div class="mobileUrl">
              <el-form-item label="小程序路径" prop="miniProgramUrl">
                <el-input v-model="openUrlAddr.h5Url_1" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="Android路径" prop="appUrl">
                <el-input v-model="openUrlAddr.androidUrl_1" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="IOS路径" prop="appUrl">
                <el-input v-model="openUrlAddr.iosUrl_1" :style="{ width: '90%' }"/>
              </el-form-item>
            </div>
          </div>

          <!-- 4：中职 -->
          <div class="openUrl" v-if="activeIndex === '4'">
            <div>
              <el-form-item label="打开路径后缀">
                <el-input
                  v-model="openUrlAddr.pcUrl_4"
                  :style="{ width: '90%' }"
                />
              </el-form-item>
            </div>
            <div class="mobileUrl">
              <el-form-item label="小程序路径" prop="miniProgramUrl">
                <el-input v-model="openUrlAddr.h5Url_4" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="Android路径" prop="appUrl">
                <el-input v-model="openUrlAddr.androidUrl_4" :style="{ width: '90%' }"/>
              </el-form-item>
              <el-form-item label="IOS路径" prop="appUrl">
                <el-input v-model="openUrlAddr.iosUrl_4" :style="{ width: '90%' }"/>
              </el-form-item>
            </div>
          </div>
        </div>

        <template
          v-if="
            ['DATA_RETURN', 'RECOMMEND_INSTRUCT'].includes(
              postForm.instructType
            ) && postForm.inputDevice.indexOf(1) !== -1
          "
        >
          <el-form-item label="PC端返回内容:" prop="configInfo" required>
            <el-input
              class="editTextArea"
              v-model="postForm.configInfo"
              type="textarea"
            />
          </el-form-item>
        </template>

        <template
          v-if="
            ['DATA_RETURN', 'RECOMMEND_INSTRUCT'].includes(
              postForm.instructType
            ) && postForm.inputDevice.indexOf(2) !== -1
          "
        >
          <el-form-item label="移动端返回内容:" prop="mobileConfigInfo">
            <el-input
              class="editTextArea"
              v-model="postForm.mobileConfigInfo"
              type="textarea"
            />
          </el-form-item>
        </template>

        <!-- <template v-if="['OPEN_OPERATION'].includes(postForm.instructType)">
          <el-form-item label="指令返回模板:" prop="openOperationTemplate">
            <el-input class="editTextArea" v-model="postForm.openOperationTemplate" type="textarea" />
          </el-form-item>
        </template> -->

        <el-form-item label="常见语音指令：" required>
          <dragList :data="voiceArr" ref="dragListRef"></dragList>
        </el-form-item>

        <el-form-item label="描述：" prop="describe">
          <el-input
            v-model="postForm.describe"
            type="textarea"
            rows="4"
            resize="none"
            :style="{ width: '580px' }"
          />
        </el-form-item>
        <el-form-item label="指令关键词" prop="keyword" required>
          <el-input
            v-model="postForm.keyword"
            type="textarea"
            rows="4"
            resize="none"
            :style="{ width: '580px' }"
          />
        </el-form-item>
        <div class="isOpen">
          <el-form-item label="是否为内部指令">
            <el-switch v-model="postForm.isInner" />
          </el-form-item>
          <span>选中后，该指令不会对学校开放。</span>
        </div>
        <div class="isOpen">
          <el-form-item label="是否对用户展示">
            <el-switch v-model="postForm.display" />
          </el-form-item>
          <span>选中后，该指令会出现在指令集参考手册和模糊匹配列表中。</span>
        </div>
        <div
          class="isOpen"
          v-if="
            postForm.instructType === 'OPEN_OPERATION' ||
            postForm.instructType === 'DATA_RETURN' ||
            postForm.instructType === 'RECOMMEND_INSTRUCT'
          "
        >
          <el-form-item label="是否加入高频">
            <el-switch v-model="postForm.isHigh" />
          </el-form-item>
          <span>选中后，该指令会默认出现在高频指令列表中。</span>
        </div>
        <div
          class="isOpen"
          v-if="
            postForm.instructType === 'OPEN_OPERATION' ||
            postForm.instructType === 'DATA_RETURN' ||
            postForm.instructType === 'RECOMMEND_INSTRUCT'
          "
        >
          <el-form-item label="是否直接启用">
            <el-switch v-model="postForm.flag" />
          </el-form-item>
          <span
            >确保各项数据正确时可直接启用，否则建议由管理员再次确认后再启用。</span
          >
        </div>
      </el-form>
      <div class="buttons">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认 </el-button>
          <el-button
            @click="
              () => {
                visible = false;
                emits('visibleChange', false);
              }
            "
          >
            取消
          </el-button>
        </el-form-item>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  checkSameInstructName,
  getAllSystemInfo,
  postInstruct,
} from "@/api/manage";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { getSubSystemsMainServerBySubjectID } from "../../../utils/CommonRequest";
import dragList from "../dragList/index.vue";
import {
  ECenter,
  EFunctionType,
  EInstructTypeR,
  centerSelectData,
  functionTypeSelectData,
} from "../enum";
import { transformCommonSentence } from "../utils";

const route = useRoute();
const props = defineProps({
  show: Boolean,
  title: String,
  defaultInfo: Object,
});

const emits = defineEmits(["visibleChange", "submitSuccess"]);

const instructTypeList = [
  { label: "打开操作", value: "OPEN_OPERATION" },
  { label: "数据返回", value: "DATA_RETURN" },
  { label: "控制操作", value: "CONTROL_OPERATION" },
  { label: "推荐指令", value: "RECOMMEND_INSTRUCT" },
];

const activeIndex = ref("2");
const handleSelect = (key, keyPath) => {
  activeIndex.value = key;
};

const visible = ref(props.show);

const formRef = ref();

const postForm = reactive({
  instructCode: "",
  instructName: "",
  instructType: "OPEN_OPERATION",
  instructType02: [], //售前售后指令 1-售前 2-售后
  centerId: "",
  sysId: "",
  instructSource: "",
  moduleId: "",
  role: [],
  inputType: "",
  openUrl: "",
  commonSentence: [""],
  describe: "",
  keyword: "",
  checkId: "",
  version: [],
  configInfo: "",
  mobileConfigInfo: "", //移动端指令返回内容
  openOperationTemplate: "", //打开指令返回模板
  suffixUrl: "",
  flag: false,
  functionType: "", //指令功能类别
  isHigh: false, //是否高频指令
  highRole: "", //高频指令所属角色
  highOrderNo: "", //高频指令排序号
  miniProgramUrl: "", //小程序打开地址
  iosUrl: "", //ios打开地址
  androidUrl: "", //android打开地址
  inputDevice: [], //输入的设备
  display: true, //是否对用户展示
  isInner: false, //是否为内部指令
});

const openUrlAddr = reactive({
  pcUrl_2: "", //中小学4个打开地址
  h5Url_2: "",
  androidUrl_2: "",
  iosUrl_2: "",
  pcUrl_1: "", //大学4个打开地址
  h5Url_1: "",
  androidUrl_1: "",
  iosUrl_1: "",
  pcUrl_4: "", //中职4个打开地址
  h5Url_4: "",
  androidUrl_4: "",
  iosUrl_4: "",
});

const voiceArr = ref([]);
const dragListRef = ref(null);

const rawSysInfos = ref([]);
const sysInfos = computed(() => {
  return rawSysInfos.value?.map((v) => ({
    label: `${v.sysName}(${v.sysId})`,
    value: v.sysId,
  }));
});

onMounted(() => {});

const init = () => {
  getAllSystemInfo()
    .then((res) => {
      const { data, success, msg } = res;
      if (!success) {
        ElMessage.error("获取全部系统ID失败,接口返回:" + msg);
        return;
      }
      rawSysInfos.value = data;
    })
    .catch((e) => {
      ElMessage.error("获取全部系统ID失败");
    });
};
defineExpose({ init });

// 是否显示有相同指令提示语
const hasSameInstructName = ref(false);
const checkInstructName = async () => {
  if (!postForm.instructName) {
    return;
  }
  const { data, success } = await checkSameInstructName({
    instructName: postForm.instructName,
  });
  if (!success) {
    ElMessage.error("判断是否有重复指令名称请求失败");
  }
  if (data) {
    hasSameInstructName.value = true;
  } else {
    hasSameInstructName.value = false;
  }
};

watch(
  () => props.show,
  (newVale) => {
    visible.value = newVale;
    hasSameInstructName.value = false;
  }
);

// T S A P
// 管理员 老师 学生 家长
const ERoleMap = [
  { rule: ["TEACHER", "STUDENT"], value: "COMMON_TS" },
  { rule: ["TEACHER", "ADMIN"], value: "COMMON_TA" },
  { rule: ["TEACHER", "PARENT"], value: "COMMON_TP" },
  { rule: ["STUDENT", "ADMIN"], value: "COMMON_SA" },
  { rule: ["STUDENT", "PARENT"], value: "COMMON_SP" },
  { rule: ["ADMIN", "PARENT"], value: "COMMON_AP" },
  { rule: ["TEACHER", "STUDENT", "PARENT"], value: "COMMON_TSP" },
  { rule: ["TEACHER", "ADMIN", "PARENT"], value: "COMMON_TAP" },
  { rule: ["TEACHER", "STUDENT", "ADMIN"], value: "COMMON_TSA" },
  { rule: ["STUDENT", "ADMIN", "PARENT"], value: "COMMON_SAP" },
];

const getRoleValue = (roleList) => {
  console.log("roleList = ", roleList);
  if (roleList.length === 4) return "COMMON";
  if (roleList.length === 1) return roleList[0];
  return ERoleMap.find((itemList) => {
    return (
      itemList.rule.length === roleList.length &&
      itemList.rule.every((item) => roleList.includes(item))
    );
  }).value;
};

const getFunctionTypeValue = (functionTypeName) => {
  for (let key in EFunctionType) {
    if (functionTypeName === EFunctionType[key]) {
      return key;
    }
  }

  return 10;
};

const ERoleTextMap = {
  管理员: "ADMIN",
  老师: "TEACHER",
  学生: "STUDENT",
  家长: "PARENT",
};

const EVersionTextMap = {
  中小学: [2],
  大学: [1],
  中职: [4],
  "中小学、大学": [2, 1],
  "中小学、中职": [2, 4],
  "大学、中职": [1, 4],
  "中小学、大学、中职": [1, 2, 4],
};

// T A S P
// const ERoleTextMap02 = {
//   管理员: [1],
//   老师: [2],
//   学生: [4],
//   家长: [8],
//   "管理员、老师": [1, 2],
//   "管理员、学生": [1, 4],
//   "管理员、家长": [1, 8],
//   "老师、学生": [2, 4],
//   "老师、家长": [2, 8],
//   "学生、家长": [4, 8],
//   "管理员、老师、学生": [1, 2, 4],
//   "管理员、老师、家长": [1, 2, 8],
//   "管理员、学生、家长": [1, 4, 8],
//   "老师、学生、家长": [2, 4, 8],
//   "管理员、老师、学生、家长": [1, 2, 4, 8]
// };

const EInputDeviceTextMap = {
  PC端: [1],
  移动端: [2],
  "PC端、移动端": [1, 2],
};

const EInstructType02TextMap = {
  售前: [1],
  售后: [2],
  "售前、售后": [1, 2],
};

const initDefaultInfo = (defaultInfo) => {
  if (!defaultInfo) {
    voiceArr.value = [];
    Object.assign(postForm, {
      instructCode: "",
      instructName: "",
      // instructType: "OPEN_OPERATION",
      // centerId: "",
      // sysId: "",
      // instructSource: "",
      // moduleId: "",
      // role: ["ADMIN"],
      inputType: "0",
      openUrl: "",
      commonSentence: [""],
      describe: "",
      keyword: "",
      checkId: "",
      // version: [],
      configInfo: "",
      mobileConfigInfo: "",
      openOperationTemplate: "",
      suffixUrl: "",
      count: "0",
      miniProgramUrl: "",
      androidUrl: "",
      iosUrl: "",
      // inputDevice: [],
      display: true,
      isInner: false,
    });
    Object.assign(openUrlAddr, {
      pcUrl_2: "", //中小学4个打开地址
      h5Url_2: "",
      androidUrl_2: "",
      iosUrl_2: "",
      pcUrl_1: "", //大学4个打开地址
      h5Url_1: "",
      androidUrl_1: "",
      iosUrl_1: "",
      pcUrl_4: "", //中职4个打开地址
      h5Url_4: "",
      androidUrl_4: "",
      iosUrl_4: "",
    });
    return;
  }
  Object.assign(postForm, {
    instructCode: defaultInfo.instructCode,
    instructName: defaultInfo.instructName,
    instructType: EInstructTypeR[defaultInfo.instructType],
    centerId: defaultInfo.centerId,
    sysId: defaultInfo.sysId,
    instructSource: "",
    moduleId: defaultInfo.moduleId,
    role: defaultInfo.role.split("、").map((v) => ERoleTextMap[v]),
    inputType: defaultInfo.inputType,
    openUrl: defaultInfo.openUrl,
    commonSentence: [""],
    describe: defaultInfo.describe,
    keyword: defaultInfo.keyword,
    checkId: defaultInfo.checkId,
    version: EVersionTextMap[defaultInfo.version],
    configInfo: defaultInfo.configInfo,
    mobileConfigInfo: defaultInfo.mobileConfigInfo,
    openOperationTemplate: defaultInfo.openOperationTemplate,
    suffixUrl: defaultInfo.suffixUrl,
    functionType: getFunctionTypeValue(defaultInfo.functionType),
    isHigh: defaultInfo.isHigh,
    highRole: defaultInfo.highRole,
    highOrderNo: defaultInfo.highOrderNo,
    flag: defaultInfo.flag === 0 ? true : false,
    count: defaultInfo.count,
    miniProgramUrl: defaultInfo.miniProgramUrl,
    androidUrl: defaultInfo.androidUrl,
    iosUrl: defaultInfo.iosUrl,
    inputDevice: EInputDeviceTextMap[defaultInfo.inputDevice],
    instructType02: EInstructType02TextMap[defaultInfo.instructType02],
    display: defaultInfo.display,
    isInner: defaultInfo.isInner,
  });
  voiceArr.value = transformCommonSentence(defaultInfo.commonSentence);
  if (postForm.sysId === "7534040133" && postForm.moduleId.startsWith("dsf")) {
    postForm.moduleId = postForm.moduleId.slice(3);
  }
  postForm.instructSource =
    rawSysInfos.value.find((v) => v.sysId === postForm.sysId)?.sysName ?? "";

  // 配置各学年阶段的打开地址
  // ...
  openUrlAddr.pcUrl_2 = defaultInfo.suffixUrl;
  openUrlAddr.h5Url_2 = defaultInfo.miniProgramUrl;
  openUrlAddr.androidUrl_2 = defaultInfo.androidUrl;
  openUrlAddr.iosUrl_2 = defaultInfo.iosUrl;

  if (defaultInfo.middleSchoolUrl) {
    const middleArr = defaultInfo.middleSchoolUrl.split(",");
    openUrlAddr.pcUrl_2 = middleArr[0];
    openUrlAddr.h5Url_2 = middleArr[1];
    openUrlAddr.androidUrl_2 = middleArr[2];
    openUrlAddr.iosUrl_2 = middleArr[3];
  }
  if (defaultInfo.universityUrl) {
    const middleArr = defaultInfo.universityUrl.split(",");
    openUrlAddr.pcUrl_1 = middleArr[0];
    openUrlAddr.h5Url_1 = middleArr[1];
    openUrlAddr.androidUrl_1 = middleArr[2];
    openUrlAddr.iosUrl_1 = middleArr[3];
  }
  if (defaultInfo.vocationalUrl) {
    const middleArr = defaultInfo.vocationalUrl.split(",");
    openUrlAddr.pcUrl_4 = middleArr[0];
    openUrlAddr.h5Url_4 = middleArr[1];
    openUrlAddr.androidUrl_4 = middleArr[2];
    openUrlAddr.iosUrl_4 = middleArr[3];
  }
};

watch(
  () => props.defaultInfo,
  (newVal) => {
    initDefaultInfo(newVal);
  },
  { deep: true }
);

watch(
  () => props.show,
  (newVal) => {
    if (!newVal) return;
    initDefaultInfo(props.defaultInfo);
  }
);

watch(
  () => postForm.sysId,
  async (newVal) => {
    if (!newVal) {
      return;
    }
    postForm.instructSource =
      rawSysInfos.value.find((v) => v.sysId === newVal)?.sysName ?? "";
    const { ErrCode, Data } = await getSubSystemsMainServerBySubjectID(newVal);
    if (ErrCode !== 0) {
      ElMessage.error("基础平台获取服务器地址失败");
      return;
    }
    postForm.openUrl = Data?.[0]?.WebSvrAddr ?? "";
  },
  {
    immediate: true,
  }
);
watch(
  () => props.show,
  async (newVal) => {
    if (!newVal || !postForm.sysId) {
      return;
    }
    postForm.instructSource =
      rawSysInfos.value.find((v) => v.sysId === postForm.sysId)?.sysName ?? "";
    const { ErrCode, Data } = await getSubSystemsMainServerBySubjectID(
      postForm.sysId
    );
    if (ErrCode !== 0) {
      ElMessage.error("基础平台获取服务器地址失败");
      return;
    }
    postForm.openUrl = Data?.[0]?.WebSvrAddr ?? "";
  },
  {
    immediate: true,
  }
);

const onSubmit = async () => {
  try {
    await formRef.value?.validate();
  } catch {
    return;
  }
  const requestInfo = { ...postForm };
  console.log('onSubmit requestInfo=', requestInfo)
  requestInfo.flag = requestInfo.flag ? 0 : 1;
  requestInfo.isHigh = requestInfo.isHigh ? "1" : "0";
  requestInfo.display = requestInfo.display ? "1" : "0";
  requestInfo.isInner = requestInfo.isInner ? "1" : "0";
  requestInfo.moduleId = requestInfo.moduleId || " ";
  // 第三方系统前缀加dsf
  if (postForm.sysId === "7534040133") {
    requestInfo.moduleId = "dsf" + requestInfo.moduleId;
  }
  requestInfo.describe = requestInfo.describe || " "; //传空格字符串
  requestInfo.checkId = requestInfo.checkId || requestInfo.sysId;
  requestInfo.suffixUrl = requestInfo.suffixUrl || "";
  requestInfo.centerName = ECenter[requestInfo.centerId];

  // 实时数据保存在子组件里面
  const r = dragListRef.value.voiceArr;
  requestInfo.commonSentence = r.reduce((res, item, i) => {
    const cur = `${i + 1}、${item.value || ""}${
      i === r.length - 1 ? "" : "\n"
    }`;
    return res + cur;
  }, "");
  // 大学：1   中小学：2  两个都行：3
  requestInfo.version = postForm.version.reduce((res, i) => (res += i), 0);
  requestInfo.version = String(requestInfo.version);

  requestInfo.inputDevice = postForm.inputDevice.reduce(
    (res, i) => (res += i),
    0
  );
  requestInfo.inputDevice = String(requestInfo.inputDevice);

  if (requestInfo.instructType02 && requestInfo.instructType02.length > 0) {
    requestInfo.instructType02 = postForm.instructType02.reduce(
      (res, i) => (res += i),
      0
    );
    requestInfo.instructType02 = String(requestInfo.instructType02);
  } else {
    requestInfo.instructType02 = "0";
  }

  requestInfo.role = getRoleValue(postForm.role.slice());

  // 组装打开地址
  let middleSchoolUrl = `${openUrlAddr.pcUrl_2},${openUrlAddr.h5Url_2},${openUrlAddr.androidUrl_2},${openUrlAddr.iosUrl_2}`;
  let universityUrl = `${openUrlAddr.pcUrl_1},${openUrlAddr.h5Url_1},${openUrlAddr.androidUrl_1},${openUrlAddr.iosUrl_1}`;
  let vocationalUrl = `${openUrlAddr.pcUrl_4},${openUrlAddr.h5Url_4},${openUrlAddr.androidUrl_4},${openUrlAddr.iosUrl_4}`;

  requestInfo.middleSchoolUrl = middleSchoolUrl;
  requestInfo.universityUrl = universityUrl;
  requestInfo.vocationalUrl = vocationalUrl;

  console.log("requestInfo = ", requestInfo);
  // return;
  const res = await postInstruct(requestInfo);
  if (res.success === true) {
    visible.value = false;
    emits("visibleChange", false);
    emits("submitSuccess");
    ElMessage.success("请求成功");
  } else {
    ElMessage.error("请求失败,接口返回:" + res.msg);
  }
};
</script>

<style lang="scss">
body {
  .EditInstructionDrawer {
    position: fixed;
    .el-drawer {
      width: 963px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.drawerContent {
  position: relative;
  min-height: 100%;
  padding-bottom: 30px;

  .form {
    :deep(.el-form-item .el-form-item__label) {
      font-size: 15px;
      color: #333;
    }
    .topFlex {
      display: flex;
      gap: 25px;
    }
    .second {
      display: flex;
      .id {
        display: flex;
        gap: 5px;
        .info {
          position: relative;
          top: 5px;
          width: 20px;
          height: 20px;
        }
      }
    }
    .openUrl {
      display: flex;
      gap: 5px;
      .info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }

    .flex_data_name {
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      & info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }

    .flexVersion {
      display: flex;
      justify-content: flex-start;
      gap: 25px;
      & info {
        position: relative;
        top: 5px;
        width: 20px;
        height: 20px;
      }
    }
    .voicesWrapper {
      .voices {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .voiceItem {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        .voiceCommandsHandler {
          width: 10px;
          height: 32px;
          background-color: #eee;
          cursor: move;
        }
        .input {
          width: 500px;
        }
        & .add,
        .delete {
          position: relative;
          top: 3px;
          width: 25px;
          height: 25px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .isOpen {
      display: flex;
      gap: 10px;
      span {
        font-size: 14px;
        line-height: 30px;
        color: #999;
      }
    }
  }

  .buttons {
    position: absolute;
    bottom: -20px;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    :deep(.el-button) {
      width: 100px;
      height: 35px;
    }
  }

  // 设置Edit中的【PC端返回内容、移动端返回内容】的textarea的最小高度
  :deep(.editTextArea) {
    .el-textarea__inner {
      min-height: 120px !important;
    }
  }
}

:deep(.edit-url-menu) {
  .openUrl {
    flex-direction: column;
  }

  .mobileUrl {
    display: flex;
    flex-direction: column;
  }

  .el-menu--horizontal {
    justify-content: space-around;
    border-bottom: none !important;
  }

  .el-menu-demo {
    margin-bottom: 10px;
  }
}
</style>
